<template>
    <div>
        <div>
            <el-dialog class="nyDialog" :visible.sync="is_dialog_show" width="60%" :close-on-click-modal="false"
                :before-close="() => { this.close(); }">
                <div class="overflow-hidden w-full h-full flex flex-col items-center" style="border-radius:4px;">
                    <div class="w-full h-w48 flex items-center px-w20 justify-between bg-caux text-white">
                        <div class="text-f14">券码列表</div>
                        <i class="el-icon-circle-close   cursor-pointer" @click.stop="close()"></i>
                    </div>
                    <div class="flex flex-col w-w11/12 " style="height:400px">
                        <el-table :data="s_coupon.list_coupon" stripe style="width: 100%; " height="400">
                            <el-table-column type="index" label="序号" min-width="10%">
                            </el-table-column>
                            <el-table-column prop="info" label="券码内容" min-width="10%">
                            </el-table-column>
                            <el-table-column label="使用状态" min-width="10%">
                                <template slot-scope="scope">
                                    <div :class="scope.row.status == 0 ? ' text-cwarn' : ' text-cmain_deep'">{{
                                        scope.row.status == 0 ? '未使用'
                                            : '已使用'
                                    }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="phone" label="使用者" min-width="10%">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import nyMessageToast from "@/utils/NYMessageToast";
import DZModelBatch from "@/views/优惠券管理/model/DZModelBatch";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import DZServiceCoupon from "@/views/优惠券管理/service/DZServiceCoupon"
import DZModelCoupon from "@/views/优惠券管理/model/DZModelCoupon";
@Component
export default class UiDialogListCoupon extends Vue {

    @Prop() is_showDialog;

    @Prop() data;

    is_dialog_show = false;

    s_coupon = new DZServiceCoupon();



    created() { }

    mounted() {
    }

    beforeDestroy() { }

    close() {
        this.$emit('nydialog_closed', '');
        this.initDialog();
    }
    initDialog() {
        this.s_coupon.list_coupon = [];
        this.is_dialog_show = false;
    }

    @Watch("is_showDialog")
    watchShowDialog(value: any, oldValue: string) {
        this.is_dialog_show = value;
    }

    @Watch("data")
    watchShowData(value: Array<DZModelCoupon>, oldValue: any) {
        this.s_coupon.list_coupon = value;
    }

}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
    border-radius: 4px !important;
    border: none;
}

/deep/.el-dialog__body {
    text-align: left;
    min-height: 22vw;
    padding: 0px;
}

/deep/ .dialog-tips {
    margin-top: 0 !important;
}

/deep/ .el-dialog__footer {
    text-align: right;
}

/deep/.el-dialog__header {
    height: 0px;
    padding: 0;
}

/deep/ .el-icon-close:before {
    content: '';
}

.nyDialog {
    padding-top: 10vh;
    background: none;
}
</style>
